<template>
  <div>
    {{count}}
    <el-button @click="adds" type="primary">提交.</el-button>
    <el-button @click="addsAsync" type="primary">异步提交</el-button>
    {{doneTodosCount}}


    
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
export default {
  name: 'HelloWorld',
  data() {
    return {
      //count: 1
    };
  },
  props: {
    msg: String
  },
  created() {
    //console.log('hello Vuex!');
    //console.log('getTodoById:', this.aa(2));
    // getTodoById
  },
  computed: {
    ...mapState(['count']),
    // ...mapGetters(['getTodoById','doneTodosCount'])
    ...mapGetters({ aa: 'getTodoById', doneTodosCount: 'doneTodosCount' }) // 可重命名
  },
  methods: {
    adds() {
      this.$store.commit('increment', {
        amount: 10
      });
    },
    addsAsync() {
      this.$store.dispatch('incrementAsync');
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

